<template>
  <main id="maincontent" role="main">
    <div class="container container--welcome-feature">
      <div
        class="region region--full region-feature"
        role="region"
        aria-label="sign up form"
      >
        <div class="column column--half">
          <div class="element element--iframe">
            <div class="main">
              <div class="container container--welcome-feature">
                <div
                  class="region region--full region-feature"
                  role="region"
                  aria-label="sign up form"
                >
                  <div class="column column--half">
                    <div class="element element--iframe">
                      <account></account>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="column column--half feature-img"
          role="img"
          aria-label="iPhone Graphic"
        >
          <div class="element element--img">
            <img
              class="img"
              alt="MarketWatch on iPhone"
              src="../../assets/singin.png"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="container container--welcome">
      <div
        class="region region--full region-welcome-tiles"
        role="region"
        aria-label="benefits"
      >
        <div class="column column--full">
          <div class="element element--list welcome-tiles">
            <div class="list__item">
              <div class="item__icon" role="img">
                <img
                  class="img"
                  alt="world icon"
                  src="@/assets/icon1-singin.png"
                />
              </div>
              <div class="item__btn">
                <a class="btn btn--primary">Real-Time market data</a>
              </div>
              <div class="item__description">
                <p>
                  Our market data offerings include real-time pricing, global
                  historical data, financial statements and advanced charting.
                </p>
              </div>
            </div>
            <div class="list__item">
              <div class="item__icon" role="img">
                <img
                  class="img"
                  alt="watchlist icon"
                  src="@/assets/icon2-singin.png"
                />
              </div>
              <div class="item__btn">
                <a class="btn btn--primary">Watchlist</a>
              </div>
              <div class="item__description">
                <p>
                  Track your stock picks and see related MarketWatch stories to
                  stay up-to-date on your investments.
                </p>
              </div>
            </div>
            <div class="list__item">
              <div class="item__icon" role="img">
                <img
                  class="img"
                  alt="newsletter icon"
                  src="@/assets/icon3-singin.png"
                />
              </div>
              <div class="item__btn">
                <a class="btn btn--primary">Newsletters</a>
              </div>
              <div class="item__description">
                <p>
                  Subscribe to our newsletters for information, analysis and
                  actionable ideas to help you reach your investment goals.
                </p>
              </div>
            </div>
            <div class="list__item">
              <div class="item__icon" role="img">
                <img
                  class="img"
                  alt="Virtual Stock Exchange icon"
                  src="@/assets/singin.png"
                />
              </div>
              <div class="item__btn">
                <a class="btn btn--primary">Virtual stock exchange</a>
              </div>
              <div class="item__description">
                <p>
                  Our Virtual Stock Exchange lets you test trading strategies in
                  a real world setting. Join the more than 300,000 people
                  competing in simulations.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="region region--full region-welcome-callout"
        role="region"
        aria-label="subscribe today"
      >
        <div class="column column--full">
          <div class="group group--callout welcome-callout u-flex">
            <div class="callout__info">
              <h2 class="title">
                Become a MarketWatch subscriber for unlimited access
              </h2>
              <p class="description">
                Understand how today's business practices, market dynamics, tax
                policies and more impact you with real-time news and analysis.
              </p>
              <ul class="list" role="list">
                <li class="list__item" role="listitem">
                  <strong>Be in the know</strong> with exclusive coverage
                </li>
                <li class="list__item" role="listitem">
                  <strong>Never miss out</strong> with unlimited access across
                  platforms and devices
                </li>
              </ul>
              <a class="btn btn--subscribe" href="">Subscribe Today</a>
            </div>
            <div class="callout__img" role="img">
              <img
                class="img"
                alt="MarketWatch on various devices"
                src="@/assets/mw_singin.png"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup>
import "./singin.css";
import account from "./account.vue";
</script>
<style lang="scss" scoped>
.container--welcome .welcome-tiles .list__item {
  width: 100%;
  max-width: 300px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}
.item__btn {
  width: 90%;
}

.container--welcome-feature {
  max-width: 100%;
  background-image: url(../../assets/siningbg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top: -30px;
}

</style>
